<template>
  <div class="animate-pulse">
    <!-- 角色卡片骨架屏 -->
    <div v-if="type === 'role-card'" class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 p-5">
      <div class="w-16 h-16 rounded-xl bg-gray-200 mx-auto"></div>
      <div class="mt-3 text-center">
        <div class="h-4 bg-gray-200 rounded mx-auto" :style="{ width: '60%' }"></div>
        <div class="mt-2 h-3 bg-gray-200 rounded mx-auto" :style="{ width: '80%' }"></div>
        <div class="mt-1 h-3 bg-gray-200 rounded mx-auto" :style="{ width: '70%' }"></div>
      </div>
      <div class="mt-4 flex gap-2">
        <div class="flex-1 h-9 bg-gray-200 rounded-lg"></div>
        <div class="w-9 h-9 bg-gray-200 rounded-lg"></div>
      </div>
    </div>

    <!-- 角色网格骨架屏 -->
    <div v-else-if="type === 'role-grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div v-for="i in count" :key="i" class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 p-5">
        <div class="w-16 h-16 rounded-xl bg-gray-200 mx-auto"></div>
        <div class="mt-3 text-center">
          <div class="h-4 bg-gray-200 rounded mx-auto" :style="{ width: '60%' }"></div>
          <div class="mt-2 h-3 bg-gray-200 rounded mx-auto" :style="{ width: '80%' }"></div>
          <div class="mt-1 h-3 bg-gray-200 rounded mx-auto" :style="{ width: '70%' }"></div>
        </div>
        <div class="mt-4 flex gap-2">
          <div class="flex-1 h-9 bg-gray-200 rounded-lg"></div>
          <div class="w-9 h-9 bg-gray-200 rounded-lg"></div>
        </div>
      </div>
    </div>

    <!-- 探索页角色卡片骨架屏 -->
    <div v-else-if="type === 'explore-card'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div v-for="i in count" :key="i" class="bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-5">
        <div class="w-16 h-16 rounded-full bg-gray-200"></div>
        <div class="mt-3">
          <div class="h-5 bg-gray-200 rounded" :style="{ width: '70%' }"></div>
          <div class="mt-2 h-3 bg-gray-200 rounded" :style="{ width: '90%' }"></div>
          <div class="mt-1 h-3 bg-gray-200 rounded" :style="{ width: '80%' }"></div>
        </div>
        <div class="mt-3 flex flex-wrap gap-2">
          <div class="h-6 bg-gray-200 rounded-md" :style="{ width: '60px' }"></div>
          <div class="h-6 bg-gray-200 rounded-md" :style="{ width: '50px' }"></div>
        </div>
        <div class="mt-4 h-10 bg-gray-200 rounded-lg"></div>
      </div>
    </div>

    <!-- 列表项骨架屏 -->
    <div v-else-if="type === 'list-item'" class="flex items-center space-x-3 p-3">
      <div class="w-10 h-10 bg-gray-200 rounded-full"></div>
      <div class="flex-1">
        <div class="h-4 bg-gray-200 rounded" :style="{ width: '60%' }"></div>
        <div class="mt-1 h-3 bg-gray-200 rounded" :style="{ width: '40%' }"></div>
      </div>
    </div>

    <!-- 文本骨架屏 -->
    <div v-else-if="type === 'text'" class="space-y-2">
      <div v-for="i in count" :key="i" class="h-4 bg-gray-200 rounded" :style="{ width: `${Math.random() * 40 + 60}%` }"></div>
    </div>

    <!-- 默认骨架屏 -->
    <div v-else class="bg-gray-200 rounded" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  type?: 'role-card' | 'role-grid' | 'explore-card' | 'list-item' | 'text' | 'default'
  count?: number
  width?: string
  height?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  count: 4,
  width: '100%',
  height: '20px'
})
</script>
